<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
    <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<div [hidden]="epDatagrid">
	<clr-dg-action-bar>
		<div class="btn-group">
			<button type="button" class="btn btn-sm btn-secondary" (click)="populateEndpointForm({'id':null,'name':null,'endPointType':'MACHINE','credentialsName':null,'remoteMachineConnectionProperties':{'host':null,'osType':null,'sshPort':22,'timeout':1000},'tags':null});epDatagrid=true;epForm=false;addEdit='Add';"><clr-icon shape="plus"></clr-icon> Remote Machine</button>
		</div>
	</clr-dg-action-bar>
	<clr-datagrid [clrDgLoading]="isLoading">
		<clr-dg-column [clrDgField]="'name'">Endpoint Name</clr-dg-column>
		<clr-dg-column [clrDgField]="'credentialsName'">Credentials Name</clr-dg-column>
		<clr-dg-column [clrDgField]="'remoteMachineConnectionProperties.host'">Host Address</clr-dg-column>
		<clr-dg-column [clrDgField]="'remoteMachineConnectionProperties.osType'">OS Type</clr-dg-column>
		<clr-dg-column [clrDgField]="'remoteMachineConnectionProperties.sshPort'">SSH Port</clr-dg-column>
        <clr-dg-column [clrDgField]="'remoteMachineConnectionProperties.timeout'">Timeout(ms)</clr-dg-column>
        <clr-dg-column>Tags</clr-dg-column>
		<clr-dg-row *clrDgItems="let endpoint of endpoints" [clrDgItem]="endpoint">
			<clr-dg-action-overflow>
				<button class="action-item" (click)="populateEndpointForm(endpoint);epDatagrid=true;epForm=false;addEdit='Edit';">Edit</button>
				<button class="action-item" (click)="deleteEndpoint(endpoint);">Delete</button>
			</clr-dg-action-overflow>
			<clr-dg-cell>{{endpoint.name}}</clr-dg-cell>
			<clr-dg-cell>{{endpoint.credentialsName}}</clr-dg-cell>
			<clr-dg-cell>{{endpoint.remoteMachineConnectionProperties.host}}</clr-dg-cell>
			<clr-dg-cell>{{endpoint.remoteMachineConnectionProperties.osType}}</clr-dg-cell>
			<clr-dg-cell>{{endpoint.remoteMachineConnectionProperties.sshPort}}</clr-dg-cell>
            <clr-dg-cell>{{endpoint.remoteMachineConnectionProperties.timeout}}</clr-dg-cell>
            <clr-dg-cell><span class="label label-info" *ngFor="let item of endpoint.tags | keyvalue">{{item.key}}={{item.value}}</span></clr-dg-cell>
		</clr-dg-row>
		<clr-dg-footer>
			<clr-dg-pagination #pagination [clrDgPageSize]="10">
				<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Endpoints per page</clr-dg-page-size>
				{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} endpoints
			</clr-dg-pagination>
		</clr-dg-footer>
	</clr-datagrid>
</div>
<div [hidden]="epForm">
	<h3 class="modal-title">{{addEdit}} Remote Machine</h3>
	<form #remoteMachineForm="ngForm" #nativeRemoteMachineForm *ngIf="epFormData" (ngSubmit)="addOrUpdateEndpoint(remoteMachineForm.value);epDatagrid=false;epForm=true;" ngNativeValidate>
        <section class="form-block">
            <div class="form-group">
                <input type="text" name="id" [(ngModel)]="epFormData.id" [hidden]="true">
            </div>
			<div class="form-group">
                <input type="text" name="endPointType" [(ngModel)]="epFormData.endPointType" [hidden]="true">
            </div>
			<div class="form-group">
				<label for="name">Endpoint Name</label>
                <input type="text" name="name" [(ngModel)]="epFormData.name" pattern="^[A-Za-z0-9-_.]+$" title="alphanumeric and special characters (_ - .) are allowed" [required]="addEdit == 'Add'" [readonly]="addEdit == 'Edit'">
            </div>
			<div class="form-group">
                <label for="credentialsName">Credential Name</label>
                <clr-dropdown>
                    <input clrDropdownTrigger type="text" name="credentialsName" (input)="searchCredentials($event.target.value);" [(ngModel)]="epFormData.credentialsName" />
                    <clr-icon shape="caret down" clrDropdownTrigger size="24" (click)="searchCredentials('');"></clr-icon>
                    <clr-dropdown-menu *clrIfOpen clrPosition="bottom-left">
                        <ng-container *ngFor="let searchedCredential of searchedCredentials">
                            <button type="button" clrDropdownItem *ngIf="searchedCredential.type == 'MACHINE'" (click)="setCredentialVal(searchedCredential.name);">{{searchedCredential.name}}</button>
                        </ng-container>
                    </clr-dropdown-menu>
                </clr-dropdown><clr-icon shape="plus-circle" (click)="machineCredential=true;" style="width:21px;height:39px;"></clr-icon>
            </div>
			<fieldset ngModelGroup="remoteMachineConnectionProperties">
                <div class="form-group">
                    <label for="host">Machine Host/IP</label>
                    <input type="text" name="host" [(ngModel)]="epFormData.remoteMachineConnectionProperties.host" required>
                </div>
                <div class="form-group">
                    <label for="sshPort">SSH Port</label>
                    <input type="number" min="0" max="65535" name="sshPort" [(ngModel)]="epFormData.remoteMachineConnectionProperties.sshPort" required>
                </div>
                <div class="form-group">
                    <label for="timeout">SSH Timeout</label>
                    <input type="number" min="0" max="2147483647" name="timeout" [(ngModel)]="epFormData.remoteMachineConnectionProperties.timeout" required>
                </div>
                <div class="form-group">
                    <label for="osType">OS Type</label>
                    <div class="select">
                        <select name="osType" [(ngModel)]="epFormData.remoteMachineConnectionProperties.osType" required>
                            <option>LINUX</option>
                        </select>
                    </div>
                </div>
            </fieldset>
            <div class="form-group">
                <label for="tags">Tags</label>
                <span class="label label-info" *ngFor="let item of tagsData | keyvalue">{{item.key}}={{item.value}}&nbsp;<clr-icon shape="times" size="12" (click)="removeTag(item.key);"></clr-icon></span>
                <clr-icon shape="plus-circle" (click)="tagsModal=true;" style="width:21px;height:30px;"></clr-icon>
            </div>
        </section>
        <button type="button" class="btn btn-outline" (click)="epDatagrid=false;epForm=true;ngOnInit();">CANCEL</button>
        <button [clrLoading]="testEndpointBtnState" type="button" class="btn btn-outline" (click)="testEndpointConnection(nativeRemoteMachineForm.reportValidity(), remoteMachineForm.value);">TEST CONNECTION</button>
        <button type="submit" class="btn btn-primary" [disabled]="disableSubmit">SUBMIT</button>
    </form>
</div>
<clr-modal [(clrModalOpen)]="machineCredential" [clrModalClosable]="false">
    <h3 class="modal-title">Add Machine Credential</h3>
    <div class="modal-body">
        <clr-alert *ngIf="authErrorFlag" [clrAlertType]="'danger'">
            <div class="alert-item">{{authAlertMessage}}</div>
        </clr-alert>
        <form #machineCredentialForm="ngForm" (ngSubmit)="addMachineCredential(machineCredentialForm);" ngNativeValidate>
            <section class="form-block">
                <div class="form-group">
                    <label for="name">Credential Name</label>
                    <input type="text" name="name" pattern="^[A-Za-z0-9-_.]+$" title="alphanumeric and special characters (_ - .) are allowed" ngModel required>
                </div>
                <div class="form-group">
                    <label for="username">User Name</label>
                    <input type="text" name="username" ngModel required>
                </div>
                <div class="form-group">
                    <label>Authorization</label>
                    <div class="clr-control-container clr-control-inline">
                        <div class="clr-radio-wrapper">
                            <input type="radio" id="apassword" name="authorization" value="apassword" class="clr-radio" (click)="showAuthorization($event.target.value);">
                            <label for="apassword" class="clr-control-label">Password</label>
                        </div>
                        <div class="clr-radio-wrapper">
                            <input type="radio" id="privateKey" name="authorization" value="privateKey" class="clr-radio" (click)="showAuthorization($event.target.value);">
                            <label for="privateKey" class="clr-control-label">Private Key</label>
                        </div>
                    </div>
                </div>
                <div class="form-group" [hidden]="passwordHidden">
                    <input type="password" name="password" ngModel [required]="!passwordHidden">
                </div>
                <div class="form-group" [hidden]="privateKeyHidden">
                    <input type="file" name="privateKey" (change)="getPvtKeyFiles($event)" ngModel [required]="!privateKeyHidden">
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="machineCredential=false;machineCredentialForm.reset();">CANCEL</button>
            <button type="submit" class="btn btn-primary" [clrLoading]="submitBtnState">SUBMIT</button>
        </form>
    </div>
</clr-modal>
<clr-modal [(clrModalOpen)]="tagsModal">
    <h3 class="modal-title">Add Tags</h3>
    <div class="modal-body">
        <form #tagsForm="ngForm" (ngSubmit)="updateTags(tagsForm.value);tagsModal=false;tagsForm.reset();">
            <section class="form-block">
                <div class="form-group">
                    <label for="tagKey">Key</label>
                    <input type="text" name="tagKey" ngModel>
                </div>
                <div class="form-group">
                    <label for="tagValue">Value</label>
                    <input type="text" name="tagValue" ngModel>
                </div>
            </section>
            <button type="button" class="btn btn-outline" (click)="tagsModal=false;">CANCEL</button>
            <button type="submit" class="btn btn-primary">ADD</button>
        </form>
    </div>
</clr-modal>